<template>
<view class="body">
  <view class="header">
    <image :src="selectType[typeIndex].img" mode="widthFix" class="swiper-img"></image>
    <navigator :url="'/pages/tools/stopSelect/city/city?type=' + selectType[typeIndex].type" class="city">
      <text>{{cityname}}</text>
      <image src="http://m.bendibao.com/news/youjiachaxun/images/sy_02.png" class="select-icon"></image>
    </navigator>
  </view>
  <view class="main">
    <view class="input flex center">
      <input type="text" placeholder="请输入查询区域" @input="inputKeyWrods" :value="keywords">
      <view class="btn" @tap="select">查询</view>
      <!-- <image src="http://m.hz.bendibao.com/news/huodongchaxun/images/search.png" class="search" /> -->
    </view>
    <!-- <view class="select flex center">
            <picker class="type" mode="selector" range="{{selectType}}" range-key="type" value="{{typeIndex}}" bindchange="typeChange">
                {{selectType[typeIndex].type}}查询
            </picker>
            <image src="http://imgbdb3.bendibao.com/whbdb/202011/2/20201102101456_60385.png" class="select-icon" />
        </view> -->
    <!-- <view class="title flex around">
            <view class="title-item">{{selectType[typeIndex].type}}时间</view>
            <view class="title-item">{{selectType[typeIndex].type}}范围</view>
        </view> -->
    <view class="list" v-if="infoList.cut">
      <view v-for="(item, index) in infoList.cut" :key="index" class="list-item" @tap="shwoText" :data-index="index">
        <view class="list-content flex time">
          <image src="http://imgbdb3.bendibao.com/whbdb/202011/10/20201110170205_17845.png" class="content-icon"></image>
          <view :class="' ' + (item.show ? '' : 'text-over')">
            {{selectType[typeIndex].type}}时间：{{item.begin_time}}至{{item.end_time}}
          </view>
        </view>
        <view class="list-content flex local">
          <image src="http://imgbdb3.bendibao.com/whbdb/202011/10/20201110170317_23407.png" class="content-icon"></image>
          <view :class="'local ' + (item.show ? '' : 'text-over')">{{selectType[typeIndex].type}}范围：{{item.location}}</view>
        </view>
        <view class="flex center">
          <image src="http://imgbdb3.bendibao.com/whbdb/202011/10/20201110172219_41537.png" class="arrow-down" v-if="!item.show"></image>
          <image src="http://imgbdb3.bendibao.com/whbdb/202011/10/20201110172219_41537.png" class="arrow-down up" v-if="item.show"></image>
        </view>
      </view>
    </view>
    <view v-else style="text-align:center;">
      暂时还没有相关数据哦~
    </view>
  </view>
  <fixed-btn :city="cityname" :path="'/pages/index/index?city=' + citycode">
    <text slot="left">返回</text><text slot="right">首页</text>
  </fixed-btn>
</view>
</template>

<script>
const app = getApp();
import util from "../../../../utils/util";
var QQMapWX = require("../../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
import fixedBtn from "../../../../component/fixedBtn/fixedBtn";

export default {
  data() {
    return {
      cityname: "深圳",
      citycode: "sz",
      selectType: [{
        type: "停电",
        img: "http://imgbdb3.bendibao.com/whbdb/202011/10/20201110163435_64496.jpg"
      }, {
        type: "停水",
        img: "http://imgbdb3.bendibao.com/whbdb/202011/10/20201110163445_47785.jpg"
      }, {
        type: "停气",
        img: "http://imgbdb3.bendibao.com/xcxbdb/file/20213/8/20210308114410_13270.jpeg"
      }],
      typeIndex: 0,
      infoList: [],
      keywords: ""
    };
  },

  components: {
    fixedBtn
  },
  props: {},
  onLoad: function (options) {
    this.setData({
      typeIndex: options.type <= 2 ? options.type : 0,
      citycode: options.citycode ? options.citycode : uni.getStorageSync('citycode') ? uni.getStorageSync('citycode') : 'sz',
      keywords: options.qu ? options.qu : ''
    });
    util.getUrl(app.globalData.url).then(() => {
      util.request("zhuanti.php", {
        action: "cut_off",
        category: this.selectType[this.typeIndex].type,
        type: "city"
      }, "POST").then(res => {
        if (res.data.state == 1) {
          let key = this.citycode.substr(0, 1).toUpperCase();
          if (res.data.data.city[key] && res.data.data.city[key].find(city => city.citycode == this.citycode)) this.setData({
            cityname: res.data.data.city[key].filter(city => city.citycode == this.citycode)[0].cityname
          });
        }

        this.getLocation();
      });
    });
  },

  onShow() {
    this.getInfo();
  },

  onShareAppMessage: function () {},
  methods: {
    // 获取定位
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city;

          if (city && !city.includes(this.cityname)) {
            uni.showModal({
              content: '您当前定位城市为' + city + '\n是否需要切换到' + city + this.selectType[this.typeIndex].type + '查询？',
              success: async res => {
                if (res.confirm) {
                  city = city.substr(0, city.length - 1);
                  const cityCode = await this.getCityCode(city);
                  this.setData({
                    cityname: city,
                    citycode: cityCode
                  });
                  this.getInfo();
                }
              }
            });
          }
        }
      });
    },

    // 获取cityCode,参数为市
    async getCityCode(city) {
      const res = await util.request("citycode.php", {
        action: "city",
        city: city
      }, "POST");
      return res.data.data[0].citycode;
    },

    // 获取查询信息
    getInfo() {
      util.request("zhuanti.php", {
        action: "cut_off",
        category: this.selectType[this.typeIndex].type,
        citycode: this.citycode,
        keywords: this.keywords
      }, "POST").then(res => {
        if (res.data.state == 1) if (res.data.data.cut) res.data.data.cut.forEach(item => {
          item.show = false; // if (item.begin_time) {
          //     let begin_time = new Date(item.begin_time);
          //     item.begin_time = `${begin_time.getMonth() + 1}月${begin_time.getDate()}日 ${begin_time.getHours()}:${begin_time.getMinutes()}`
          // }
          // if (item.end_time) {
          //     let end_time = new Date(item.end_time);
          //     item.end_time = `${end_time.getMonth() + 1}月${end_time.getDate()}日 ${end_time.getHours()}:${end_time.getMinutes()}`
          // }
        });
        this.setData({
          infoList: res.data.data
        });
      });
    },

    typeChange(e) {
      let index = e.detail.value;
      this.setData({
        typeIndex: index,
        infoList: []
      });
      this.getInfo();
    },

    shwoText(e) {
      let index = util.getValue("index", e);
      let data = this.infoList.cut[index];
      data.show = !data.show;
      this.setData({
        infoList: this.infoList
      });
    },

    inputKeyWrods(e) {
      let keywords = e.detail.value;
      this.setData({
        keywords
      });
    },

    select() {
      this.getInfo();
    }

  }
};
</script>
<style>
button {
  margin: 0;
}

.header {
  position: relative;
}

.main {
  position: relative;
  top: -80rpx;
  margin-bottom: 140rpx;
}

.swiper-img {
  width: 100%;
}

.city {
  position: absolute;
  top: 25rpx;
  right: 25rpx;
  width: 115rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  border-radius: 35rpx;
  text-align: center;
  z-index: 1;
  background-color: #FFFFFF;
}

.select-icon {
  width: 18rpx;
  height: 12rpx;
  margin-left: 10rpx;
  margin-bottom: 3rpx;
}

.input {
  height: 70rpx;
  margin: 30rpx 20rpx;
  padding: 36rpx;
  line-height: 70rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx #cecece;
}

.search {
  width: 32rpx;
  height: 32rpx;
}

input {
  width: 480rpx;
  padding: 15rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  border: 4rpx solid rgb(222, 222, 222);
}

.select {
  max-width: 200rpx;
  height: 58rpx;
  padding: 0 30rpx;
  margin-left: 68rpx;
  line-height: 58rpx;
  font-size: 30rpx;
  text-align: center;
  border-radius: 24rpx;
  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.16);
}

.list {
  margin: 20rpx;
}

.list-item {
  min-height: 73rpx;
  margin: 29rpx 0;
  padding: 28rpx 24rpx;
  line-height: 73rpx;
  font-size: 25rpx;
  border-radius: 8rpx;
  background-color: #FAFAFA;
}

.list-item .list-content:nth-child(2) {
  margin-bottom: 0;
}

.title {
  margin: 30rpx 0;
  font-size: 28rpx;
  color: #333333;
}

.text-over {
  line-height: 30rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.list-content {
  margin-bottom: 23rpx;
  align-items: flex-start;
  line-height: normal;
}

.list-content text {
  line-height: 30rpx;
}

.btn {
  width: 115rpx;
  height: 71rpx;
  margin-left: 26rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  text-align: center;
  background-color: #3CA5FF;
  border-radius: 21rpx;
}

.content-icon {
  flex-shrink: 0;
  width: 28rpx;
  height: 28rpx;
  margin-right: 10rpx;
}

.arrow-down {
  width: 32rpx;
  height: 22rpx;
  margin: 0 auto;
  margin-top: 17rpx;
}

.up {
  transform: rotateX(180deg);
}

.fotter {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 120rpx;
  padding: 0 16rpx;
  line-height: 120rpx;
  background-color: #FFFFFF;
  z-index: 1;
  box-sizing: border-box;
}

.share-icon {
  width: 29rpx;
  height: 29rpx;
  margin-left: 12rpx;
}

.share {
  width: 30%;
  margin-right: 40rpx;
}

.index {
  width: 60%;
}

.share,
.index {
  height: 80rpx;
  line-height: 80rpx;
  color: #FFFFFF;
  text-align: center;
  background-color: rgb(60, 165, 255);
  border-radius: 38rpx;
}
</style>